<!DOCTYPE html>
<html lang="zh-CN">
  <head>
        <#include "/common/common_head.ftl">
        <script>
            $(function(){
                var type = parseInt($("#type").val());
                if(type == 3){
                     $('.table-responsive').hide();
                }
                $("#type").change(function(){
                    var selVal = $(this).val();
                    if(selVal == "3"){
                        $('.table-responsive').hide();
                    }else{
                        $('.table-responsive').show();
                    }
                });
            });

            /**
             * 添加问题-添加选项
             */ 
        	function addOption(){
                var type = parseInt($("select[name='type']").val());
                if(type == 3){
                    alert("用户输入问题，不需要添加选项");
                    return;
                }
                var trHtml = '<tr><td><input name="content"/></td><td><input name="sequence" onkeyup="this.value=this.value.replace(/\D/g,\'\')" onafterpaste="this.value=this.value.replace(/\D/g,\'\')" /></td><td><a class="del" href="#">Del</a></td></tr>';
                $('#optionTbody').append(trHtml);
                $(".del").click(function(){$(this).parents("tr").remove();});
        	}

            /**
             * 编辑问题-添加选项
             */
            function addUpdateOption(){
                var trHtml = '<tr><td><input name="content"/></td><td><input name="sequence" onkeyup="this.value=this.value.replace(/\D/g,\'\')" onafterpaste="this.value=this.value.replace(/\D/g,\'\')" /></td><td><a class="del" href="#">Del</a> | <a class="update" href="#" onclick="updateAddOption(this)">Update</a></td></tr>';
                $('#optionTbody').append(trHtml);
                $(".del").click(function(){$(this).parents("tr").remove();});
            }

            function updateAddOption(e){
                var tdArr = $(e).parents("tr").children();
                var content = tdArr.eq(0).find('input').val();
                var sequence = tdArr.eq(1).find('input').val();
                var id       = $("input[name='id']").val();
                if(content=="" || sequence==""){
                    alert('选项内容和顺序不能为空！');
                    return;
                }
                var option = new Object();
                option.questionId = parseInt(id);
                option.content = content;
                option.sequence = parseInt(sequence);
                var optionJson = JSON.stringify(option);
                $.ajax({
                    type : "post",
                    dataType : "json",
                    url : "updateOption.do",
                    data : optionJson,
                    contentType : "application/json",
                    success : function(data){
                        if(data.result == 'success'){
                            alert("保存成功");    
                        }
                    },
                    error : function(data){
                        alert("抱歉，保存失败 ，请您重试。");
                    }
                });
            }

            /**
             * 删除选项
             */
            function delOption(id) {
                if(confirm('确定删除吗?')==false) 
                    return false;
                $.ajax({
                    type : "post",
                    dataType : "json",
                    url : "delOption.do",
                    data : "id=" + id,
                    //contentType : "application/json",
                    success : function(data){
                       if(data.result == 'success'){
                            $('#rowId'+id).remove();
                            alert("删除成功"); 
                        }
                    },
                    error : function(data){
                        alert("抱歉，删除失败 ，请您重试。");
                    }
                });
            }

            /**
             * 更新选项
             */
            function updateOption(id){
                var tdArr = $('#rowId'+id).children();
                var content = tdArr.eq(0).find('input').val();
                var sequence = tdArr.eq(1).find('input').val();
                if(content=="" || sequence==""){
                    alert('选项内容和顺序不能为空！');
                    return;
                }
                var questionId = $("input[name='id']").val();
                var option = new Object();
                option.id = parseInt(id);
                option.questionId = parseInt(questionId);
                option.content = content;
                option.sequence = parseInt(sequence);
                var optionJson = JSON.stringify(option);
                $.ajax({
                    type : "post",
                    dataType : "json",
                    url : "updateOption.do",
                    data : optionJson,
                    contentType : "application/json",
                    success : function(data){
                        if(data.result == 'success'){
                            alert("保存成功");    
                        }
                    },
                    error : function(data){
                        alert("抱歉，保存失败 ，请您重试。");
                    }
                });
            }

            /**
             * 添加问题-同步保存问题选项
             */
            function addForm(){
                var content  = $("input[name='content']").val();
                if($.trim(content) == ''){
                    alert('问题内容不能为空！');
                    return;
                }
                var type     = parseInt($("select[name='type']").val());
                var sequence = parseInt($("input[name='sequence']").val());
                if($.trim($("input[name='sequence']").val()) == ''){
                    alert('显示顺序不能为空！');
                    return;   
                }
                var questionnaireId = parseInt($('#questionnaireId').val());
                var question = new Object();
                question.content = content;
                question.type = type;
                question.sequence = sequence;
                question.questionnaireId = questionnaireId;
                if(type != 3){
                    var options = new Array();
                    $('#optionTbody').find('tr').each(function(){
                        var tdArr = $(this).children();
                        var option = new Object();
                        var content = tdArr.eq(0).find('input').val();
                        var sequence = tdArr.eq(1).find('input').val();
                        if(content=="" || sequence==""){
                            alert('选项内容和顺序不能为空！');
                            return;
                        }
                        option.content = content;
                        option.sequence = sequence;
                        options.push(option);
                    });
                    question.options = options;
                }
                var questionJson=JSON.stringify(question);
                $.ajax({
                    type : "post",
                    dataType : "json",
                    url : "save.do",
                    data : questionJson,
                    contentType : "application/json",
                    async : false,
                    success:function(data){
                    	if(data.result == 'success'){
                            location.href="list.do?questionnaireId=" + questionnaireId;
                        }
                    },
                    error:function(data) {
                        alert("抱歉，添加失败 ，请您重试。");
                        return false;
                    }
                });
            }

            /**
             * 编辑保存问题-只保存问题不保存选项
             */
            function saveForm(){
                var id       = $("input[name='id']").val();
                var content  = $("input[name='content']").val();
                if($.trim(content) == ''){
                    alert('问题内容不能为空！');
                    return;
                }
                var type     = parseInt($("select[name='type']").val());
                var sequence = parseInt($("input[name='sequence']").val());
                if($.trim($("input[name='sequence']").val()) == ''){
                    alert('显示顺序不能为空！');
                    return;   
                }
                var questionnaireId = parseInt($('#questionnaireId').val());
                var question = new Object();
                question.id = id;
                question.content = content;
                question.type = type;
                question.sequence = sequence;
                question.questionnaireId = questionnaireId;
                var questionJson=JSON.stringify(question);
                $.ajax({
                    type : "post",
                    dataType : "json",
                    url : "update.do",
                    data : questionJson,
                    contentType : "application/json",
                    async : false,
                    success:function(data){
                        if(data.result == 'success'){
                            location.href="list.do?questionnaireId=" + questionnaireId;
                        }
                    },
                    error:function(data) {
                        alert("抱歉，添加失败 ，请您重试。");
                        return false;
                    }
                });
            }

        </script>
  </head>
  <style>
  	.formbtn {
  	  text-align:center;
  	}
  </style>
  <body style="padding-top:0px">
        <!-- 主内容区域 S -->
 		<div class="" id="mainBoard">
        <#if entity??>
            <#assign operate="编辑">
        <#else>
            <#assign operate="添加">
        </#if>
		<!-- 导航路径 S -->
		<ol class="breadcrumb">
		  <li><a href="#">问题管理</a></li>
		  <li class="active">${operate}问题信息</li>
		  <#if entity??>
		  	<li><a href="list.do?page=${page}&questionnaireId=${entity.questionnaireId}">返回</a></li>
		  <#else>
		  	<li><a href="list.do?page=${page}&questionnaireId=${questionnaireId}">返回</a></li>
		  </#if>
		</ol>
		<!-- 导航路径 E -->

		<!-- 标题区 S -->
		<h2 class="sub-header">${operate}问题信息</h2>
		<!-- 标题区 E -->

		<!-- 内容区 S -->
        <#if entity??>
		<form action="update.do" method="post">
	    	<input type="hidden" name="id" value="${entity.id?string('###')}">
            <input type="hidden" value="${entity.questionnaireId}" id="questionnaireId" name="questionnaireId"/>
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon2">问题内容</span>
                <input class="form-control" id="content" placeholder="content" aria-describedby="basic-addon5" name="content" value="${entity.content?if_exists}">
            </div>
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon2">问题类型</span>
                <select id="type" name="type" class="form-control">
                    <option value="1" <#if entity.type==1>selected="selected"</#if>>单选</option>
                    <option value="2" <#if entity.type==2>selected="selected"</#if>>多选</option>
                    <option value="3" <#if entity.type==3>selected="selected"</#if>>用户添加</option>
                </select>
            </div>
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon2">显示顺序</span>
                <input class="form-control" id="sequence" placeholder="sequence" aria-describedby="basic-addon5" name="sequence" value="${entity.sequence?if_exists}" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
            </div>
        	<div class="formbtn"><button type="button" class="btn-primary" onclick="saveForm()">提交</button></div>
            <div class="table-responsive">
                 <div class="container-fluid">
                  <ul class="nav navbar-nav navbar-right">
                    <li><a href="javascript:addUpdateOption();">添加</a></li>
                  </ul>
                </div>
                <table class="table table-striped" id="optionTable">
                    <thead>
                        <tr>
                          <th>选项内容</th>
                          <th>选项顺序</th>
                          <th>操作</th>
                        </tr>
                     </thead>
                     <tbody id="optionTbody">
                        <#if entity.options??>
                            <#list entity.options as entity>
                                <tr id="rowId${entity.id}">
                                    <td><input name="content" value="${entity.content?if_exists}" /></td>
                                    <td><input name="sequence" value="${entity.sequence?if_exists}" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"/></td>
                                    <td><a href="javascript:delOption(${entity.id?string('###')})" onclick="if(confirm('确定删除吗?')==false) return false;">Del</a> | 
                                    <a href="javascript:updateOption(${entity.id})">Update</a></td>
                                </tr>
                            </#list>
                        </#if>
                     </tbody>
                </table>
            </div>
		</form>
		<#else>
		<form id="addForm" method="post">
            <input type="hidden" value="${questionnaireId}" id="questionnaireId" name="questionnaireId"/>
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon2">问题内容</span>
      			<input class="form-control" id="content" placeholder="content" aria-describedby="basic-addon5" name="content">
            </div>
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon2">问题类型</span>
      			<select id="type" name="type" class="form-control">
                    <option value="1">单选</option>
                    <option value="2">多选</option>
                    <option value="3">用户添加</option>
                </select>
            </div>
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon2">显示顺序</span>
      			<input class="form-control" id="sequence" placeholder="sequence" aria-describedby="basic-addon5" name="sequence" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
            </div>
            <div class="table-responsive">
            	 <div class="container-fluid">
		          <ul class="nav navbar-nav navbar-right">
		            <li><a href="javascript:addOption();">添加</a></li>
		          </ul>
		        </div>
	        	<table class="table table-striped" id="optionTable">
		          	<thead>
		                <tr>
		                  <th>选项内容</th>
		                  <th>选项顺序</th>
		                  <th>操作</th>
		                </tr>
		             </thead>
		             <tbody id="optionTbody">
		             </tbody>
	        	</table>
	        </div>
        	<div class="formbtn"><button type="button" class="btn-primary" onclick="addForm()">提交</button></div>
		</form>
		
		</#if>
		<!-- 内容区 E -->
 		<!-- 主内容区域 E -->
		
  </body>
</html>
